<template>
  <div class="map-tools" v-bind:class="{ 'map-tools-hidden': isHidden }">
    <div
      class="map-tools-control"
      v-bind:class="isHidden ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
      v-on:click="isHidden = !isHidden"
    ></div>
    <div class="map-tools-content">
      <div
        class="map-tools-item map-tools-layer-edit"
        title="图层编辑"
        v-on:click="curTool = 'layer-edit'"
      >
        <img class="map-tools-img map-tools-layer-edit-img" src="@/assets/ic_edit.png">
      </div>
      <div class="map-tools-item map-tools-location" title="坐标定位" v-on:click="curTool = 'location'">
        <img class="map-tools-img map-tools-location-img" src="@/assets/ic_location.png">
      </div>
      <div class="map-tools-item map-tools-measure" title="测量工具" v-on:click="curTool = 'measure'">
        <img class="map-tools-img map-tools-measure-img" src="@/assets/ic_measure.png">
      </div>
      <div
        class="map-tools-item map-tools-line-compare"
        title="线路对比"
        v-on:click="curTool = 'line-compare'"
      >
        <img class="map-tools-img map-tools-line-compare-img" src="@/assets/ic_compare.png">
      </div>
    </div>
    <LayerEditPopup v-if="curTool === 'layer-edit'" v-on:close="onClosePopupListener"></LayerEditPopup>
  </div>
</template>

<script>
import LayerEditPopup from "@/components/LayerEditPopup.vue";

export default {
  name: "map-tools",
  components: {
    LayerEditPopup
  },
  data() {
    return {
      isHidden: true,
      curTool: null
    };
  },
  methods: {
    onClosePopupListener() {
      const _this = this;
      _this.curTool = null;
    }
  }
};
</script>

<style scoped>
.map-tools {
  position: absolute;
  top: 160px;
  right: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  padding: 5px 5px 5px 0;
  display: flex;
  flex-direction: row;
  transition: right 0.3s;
  user-select: none;
  border: 1px solid lightgray;
}

.map-tools-hidden {
  right: -36px;
}

.map-tools-control {
  cursor: pointer;
}

.map-tools-control::before {
  color: white;
  width: 20px;
  top: 50%;
  font-size: 20px;
  position: relative;
  display: block;
  transform: translate(0, -50%);
}

.map-tools-content {
  background-color: white;
  padding: 5px;
}

.map-tools-item {
  cursor: pointer;
}

.map-tools-item + .map-tools-item {
  margin-top: 10px;
}

.map-tools-img {
  width: 20px;
  height: 20px;
  display: block;
}
</style>
